<template>
    <div style="margin-top: 23px">
        <div class="father">
            <p style="margin-left: 20px">{{userInfo.username}}的博客</p>
        </div>
        <div  style="text-align: center;margin-top: -30px">
            <span class="container">
                <el-avatar  @click="changeImgHead"  :size="70" :src="imgHead" alt="Avatar" class="image"></el-avatar>
            </span>
            <div>{{userInfo.username}}    &nbsp;码龄：5年</div>
        </div>

        <div style="text-align: center;margin-top: 10px">

          <ul class="ulsUser">
              <li class="ls" >
                  <div>282000</div>
                  <div>被访问量</div>
              </li>
              <li class="ls">
                  <div>18</div>
                  <div>原创文章</div>
              </li>
              <li class="ls">
                  <div>256321</div>
                  <div>作者排名</div>
              </li>
              <li class="ls">
                  <div>2</div>
                  <div>粉丝数量</div>
              </li>
          </ul>
        </div>

        <div style="margin-top: 20px" >
            <table width="100%">
                <tr>
                    <td valign="top"  style="width: 30%;">
                        <el-card class="box-card" style="margin-left: 150px;text-align: left">
                            <div><p class="el-icon-refrigerator" style="margin-right: 1px"></p> 毕业院校 <strong>{{userInfo.graduatedFrom}}</strong></div>
                            <div><p class="el-icon-takeaway-box" style="margin-right: 5px"></p>目前就职 <strong>{{userInfo.workFrom}}</strong></div>
                           <div><p class="el-icon-monitor" style="margin-right: 5px"></p>于 {{(userInfo.addTime)}} 加入</div>
                        </el-card>
                        <el-card class="box-card" style="margin-top: 10px;margin-left: 150px;text-align: left">
                            <span style="margin-bottom: 10px;font-size: 20px;text-align: center">获得成就</span>
                            <div style="text-align: left"><p class="el-icon-ice-cream-square" ></p> 获得<strong>{{userInfo.praiseNum}}</strong>次点赞</div>
                            <div style="text-align: left"><p class="el-icon-chat-line-round" style="margin-right: 5px"></p>内容获得<strong>{{userInfo.commentNum}}</strong>次评论</div>
                            <div style="text-align: left"><p class="el-icon-star-off" style="margin-right: 5px"></p>获得<strong>{{userInfo.collectNum}}</strong>次收藏</div>
                        </el-card>
                    </td>
                    <td valign="top" style="width: 70%; overflow:hidden;margin-left: 10px;margin-right: 20px" >
                        <div >

                            <el-tabs v-model="activeName"  @tab-click="handleClick">
                                <el-tab-pane label="最近" name="DepManage">
                                    <table style="list-style: none;margin-top: 10px;margin-left: 10px;width: 100%;" v-for="item in blogList">

                                        <el-card class="box-card">
                                            <tr>
                                                <div style="float: left;font-size: 20px;font-weight: bold"><a :href="'/#/blog_detail?id='+item.id" class="a">{{item.title}}</a></div>
                                            </tr>
                                            <tr>
                                                <td style="text-align: left">{{item.name}}</td>
                                            </tr>
                                            <tr>

                                                <div style="text-align: left">

                                                    <ul class="ulsUser">
                                                        <li class="ls" >
                                                            <div><p style="display: inline-block;color: #CA0C16;background-color: #f0f9eb"> {{item.type}}</p></div>
                                                        </li>
                                                        <li class="ls">
                                                            <div><p class="el-icon-reading"></p>682阅读</div>
                                                        </li>
                                                        <li class="ls">
                                                            <div><p class="el-icon-s-comment"></p>{{item.commentNum}}评论</div>
                                                        </li>
                                                        <li class="ls">
                                                            <div><p class="el-icon-s-comment"></p>{{item.praiseNum}}点赞</div>
                                                        </li>
                                                    </ul>

                                                </div>

                                            </tr>


                                        </el-card>


                                    </table>

                                </el-tab-pane>
                                <el-tab-pane label="文章" name="PosManage">
                                    <table style="list-style: none;margin-top: 10px;margin-left: 10px;width: 100%;" v-for="item in blogList">

                                        <el-card class="box-card">
                                            <tr>
                                                <div style="float: left;font-size: 20px;font-weight: bold"><a :href="'/#/blog_detail?id='+item.id" class="a">{{item.title}}</a></div>
                                            </tr>
                                            <tr>
                                                <td style="text-align: left">{{item.name}}</td>
                                            </tr>

                                            <tr>
                                                <div style="text-align: left">
                                                    <ul class="ulsUser">
                                                        <li class="ls" >
                                                            <div><p style="display: inline-block;color: #CA0C16;background-color: #f0f9eb">
                                                                {{item.type}}</p></div>
                                                        </li>
                                                        <li class="ls">
                                                            <div><p class="el-icon-reading"></p>682阅读</div>
                                                        </li>
                                                        <li class="ls">
                                                            <div><p class="el-icon-s-comment"></p>{{item.commentNum}}评论</div>
                                                        </li>
                                                        <li class="ls">
                                                            <div><p class="el-icon-s-comment"></p>{{item.praiseNum}}点赞</div>
                                                        </li>
                                                    </ul>
                                                </div>

                                            </tr>
                                        </el-card>


                                    </table>

                                </el-tab-pane>
                                <el-tab-pane label="收藏" name="third">收藏</el-tab-pane>
                                <el-tab-pane label="帖子" name="fourth">帖子</el-tab-pane>
                            </el-tabs>

                        </div>
                    </td>
                </tr>
            </table>
        </div>
            <ImgHeadUpload ref="refImgHeadUpload"></ImgHeadUpload>
    </div>

</template>

<script>




import {getReq,dateFormatYMD} from "../../utils/api";
import ImgHeadUpload from "./ImgHeadUpload";

    export default {
        components: {ImgHeadUpload},
        mounted(){
            this.id =this.$route.query.id
            this._getUserInfo()

        },
        name: "UserCenter",
        data(){
            return{
                id:undefined,
                userInfo:{
                    addTime:undefined
                },
                imgHead:undefined,
                activeName:'PosManage',
                blogList:[]
            }
        },
        methods:{
            _page(){
                getReq('/api/blog/list_by_id?id='+this.id).then(res=>{
                    console.log('---res---',res)
                    console.log('---res.data---',res.data)
                    this.blogList=res.data.data;
                })
            },
            changeImgHead(){
                this.$refs.refImgHeadUpload._open()

            },
             _getUserInfo() {
                 let userInfo=  sessionStorage.getItem('user')
                 console.log(userInfo)
                 if (undefined===this.id||null===this.id||''===this.id){
                     this.id=JSON.parse(userInfo).id
                 }


                 let userCenter = sessionStorage.getItem('userCenter')
                 if (undefined===userCenter||null===userCenter){
                     getReq('/api/sys_user/vo_user_center/'+this.id,{}).then(res=>{
                         this.userInfo = res.data.data
                         sessionStorage.setItem('userCenter',JSON.stringify(res.data.data))
                       this.imgHead= '/api/sys_user/view_header?uri='+this.userInfo.uri
                     })

                 }else {
                     this.userInfo = JSON.parse(userCenter)
                     this.imgHead= '/api/sys_user/view_header?uri='+this.userInfo.uri
                 }
                 this._page()

                 this.userInfo.addTime = dateFormatYMD(this.userInfo.ctime)
             }
        }
    }
</script>

<style scoped>

    .father{
        height: 70px;
        background-color: darkslategray;
        vertical-align:middle;
        /*flex 布局*/
        display: flex;
        /*实现垂直居中*/
        align-items: center;
        text-align: left;

        height:70px;
        color:#fff;
    }
    .a{
        text-decoration:none;
        color: black;
    }
    .info{

        text-align: center;
        margin-right: 25px;
        font-size: 24px;
        justify-items: center;
        font-family: DINCond-Black;
        font-weight: bold;
    }
    .infoLabel{
        margin-right: 29px;
    }

    .ulsUser{
        padding: 0;
        margin: 0;
        list-style: none;
    }
    .ls{
        display:inline-block;
        margin-right: 20px;
    }
    .image {
        width: 100%;
        height: 100%;
        backface-visibility: hidden;
    }
    .container{

    }
    .container:hover .image {
        opacity: 0.8;
        color: blueviolet;
    }

</style>